import React, { useState, useEffect } from 'react'
import { Consumer } from '../../utils/context'
import './style.less'
import { Menu, Button, Dropdown, Radio, Card } from 'antd'
import { DownOutlined } from '@ant-design/icons'
import echarts from 'echarts'
import { pjfExamClassByKemu, pjfExamByKemu } from './workStudent'

function AnalyseStudent(props) {
    const {
        classData,
        studentData,
        choiceExamInfo,
        scoreDataExam
    } = props.value
    const [choiceClassInfo, setChoiceClassInfo] = useState({})
    const [choiceStudentInfo, setChoiceStudentInfo] = useState({})
    const [studentDataClass, setStudentDataClass] = useState([])
    const [scoreDataClass, setScoreDataClass] = useState([])
    const [chartData1, setChartData1] = useState([])
    const [chartData2, setChartData2] = useState([])
    const [chartData3, setChartData3] = useState([])
    useEffect(() => {
        if (choiceExamInfo.no && choiceClassInfo.no && choiceStudentInfo.no) {
            const myChart1 = echarts.init(
                document.getElementsByClassName('echart-1')[0]
            )
            myChart1.setOption({
                title: {
                    text: choiceStudentInfo.name + '成绩分析',
                    subtext: choiceExamInfo.name + ' · ' + choiceClassInfo.name
                },
                tooltip: {},
                legend: {
                    data: ['个人成绩', '班级平均分', '年级平均分']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                radar: {
                    name: {
                        textStyle: {
                            color: '#fff',
                            backgroundColor: '#999',
                            borderRadius: 3,
                            padding: [3, 5]
                        }
                    },
                    indicator: [
                        { name: '总分', max: 750 },
                        { name: '语文', max: 150 },
                        { name: '数学', max: 150 },
                        { name: '英语', max: 150 },
                        { name: '物理', max: 120 },
                        { name: '化学', max: 108 },
                        { name: '生物', max: 72 }
                    ]
                },
                series: [
                    {
                        name: '个人成绩分析',
                        type: 'radar',
                        // areaStyle: {},
                        data: [
                            {
                                value: chartData1,
                                name: '个人成绩'
                            },
                            {
                                value: chartData2,
                                name: '班级平均分'
                            },
                            {
                                value: chartData3,
                                name: '年级平均分'
                            }
                        ]
                    }
                ]
            })
        }
    }, [
        chartData1,
        chartData2,
        chartData3,
        choiceClassInfo.name,
        choiceClassInfo.no,
        choiceExamInfo.name,
        choiceExamInfo.no,
        choiceStudentInfo.name,
        choiceStudentInfo.no,
        studentDataClass
    ])
    const choiceClassButtonEvent = (e) => {
        setChoiceClassInfo({
            no: e.key,
            name: classData.filter((item) => +item.no === +e.key)[0].name
        })
        const studentList = studentData.filter(
            (item) => +item.classNo === +e.key
        )
        setStudentDataClass(studentList)
        const studentNoList = studentList.map((item) => item.no)
        const scoreList = scoreDataExam.filter((cell) =>
            studentNoList.some((mm) => +mm === +cell.studentNo)
        )
        setScoreDataClass(scoreList)
    }
    const choiceStudentRadioEvent = (e) => {
        setChoiceStudentInfo({
            no: +e.target.value,
            name: studentData.filter((item) => +item.no === +e.target.value)[0]
                .name
        })
        const scoreByStudent = scoreDataClass.filter(
            (item) => +item.studentNo === +e.target.value
        )[0]
        setChartData1([
            +scoreByStudent.chinese +
                +scoreByStudent.math +
                +scoreByStudent.eglish +
                +scoreByStudent.physics +
                +scoreByStudent.chemistry +
                +scoreByStudent.biology,
            +scoreByStudent.chinese,
            +scoreByStudent.math,
            +scoreByStudent.eglish,
            +scoreByStudent.physics,
            +scoreByStudent.chemistry,
            +scoreByStudent.biology
        ])
        setChartData2([
            pjfExamClassByKemu(scoreDataClass, [
                'chinese',
                'math',
                'eglish',
                'physics',
                'chemistry',
                'biology'
            ]),
            pjfExamClassByKemu(scoreDataClass, ['chinese']),
            pjfExamClassByKemu(scoreDataClass, ['math']),
            pjfExamClassByKemu(scoreDataClass, ['eglish']),
            pjfExamClassByKemu(scoreDataClass, ['physics']),
            pjfExamClassByKemu(scoreDataClass, ['chemistry']),
            pjfExamClassByKemu(scoreDataClass, ['biology'])
        ])
        setChartData3([
            pjfExamByKemu(scoreDataExam, [
                'chinese',
                'math',
                'eglish',
                'physics',
                'chemistry',
                'biology'
            ]),
            pjfExamByKemu(scoreDataExam, ['chinese']),
            pjfExamByKemu(scoreDataExam, ['math']),
            pjfExamByKemu(scoreDataExam, ['eglish']),
            pjfExamByKemu(scoreDataExam, ['physics']),
            pjfExamByKemu(scoreDataExam, ['chemistry']),
            pjfExamByKemu(scoreDataExam, ['biology'])
        ])
    }
    const menuClass = (
        <Menu
            onClick={(e) => {
                choiceClassButtonEvent(e)
            }}
        >
            {classData.length ? (
                classData.map((item) => {
                    return <Menu.Item key={item.no}>{item.name}</Menu.Item>
                })
            ) : (
                <span>暂无班级</span>
            )}
        </Menu>
    )
    return choiceExamInfo.no ? (
        <div className="analyse-student-container">
            <div>
                <span>请选择班级名称：</span>
                <Dropdown overlay={menuClass}>
                    <Button type="primary">
                        {choiceClassInfo.name
                            ? choiceClassInfo.name
                            : '班级列表'}
                        <DownOutlined />
                    </Button>
                </Dropdown>
                <div>
                    {choiceClassInfo.no ? (
                        <div>
                            <Card
                                title="请选择学生"
                                style={{
                                    width: '80%',
                                    backgroundColor: '#eee'
                                }}
                            >
                                <Radio.Group onChange={choiceStudentRadioEvent}>
                                    {studentDataClass.map((item) => {
                                        return (
                                            <Radio
                                                value={item.no}
                                                key={item.no}
                                            >
                                                {item.name}
                                            </Radio>
                                        )
                                    })}
                                </Radio.Group>
                            </Card>
                            <div>
                                <div
                                    className="echart-1"
                                    style={{
                                        border: '1px solid #ccc',
                                        marginTop: '10px'
                                    }}
                                ></div>
                            </div>
                        </div>
                    ) : (
                        <></>
                    )}
                </div>
            </div>
        </div>
    ) : (
        <></>
    )
}

function hoc(A) {
    return () => {
        return (
            <Consumer>
                {(value) => {
                    return <A value={value} />
                }}
            </Consumer>
        )
    }
}

export default hoc(AnalyseStudent)
